<template>
  <div class="imgTabs">
    <div class="tabsTxt">
      <div class="tabsTitle">上传视频</div>
      <div class="imgTabsIcon">
        <img src="../../assets/images/imgTabs/返回.png" @click="goIndex()" />
      </div>
      <!-- <div class="tabsBtn">上传</div> -->
    </div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="浏览视频" name="second">
        <netMov></netMov>
      </el-tab-pane>
      <el-tab-pane label="本地视频" name="third">
        <localMov></localMov>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import localMov from '@/components/newComp/localMov'
import netMov from '@/components/newComp/netMov'
export default {
  name: 'imgTabs',
  data () {
    return {
      activeName: 'second'
    }
  },
  components: { localMov, netMov },
  methods: {
    goIndex () {
      this.$router.push('/')
    },
    handleClick (tab, event) {
      console.log(tab, event)
    }
  }
}
</script>

<style scoped>
.imgTabs {
  background-color: #f5f5f5;
  /* height: 1468px; */
  width: 750px;
  position: absolute;
}
.imgTabsIcon {
  position: absolute;
  top: 25px;
  left: 30px;
}
.imgTabsIcon img {
  width: 20px;
  z-index: 99;
}
.tabsTxt {
  width: 750px;
  height: 88px;
  background-color: #0775fd;
}

.tabsTitle {
  font-size: 34px;
  text-align: center;
  color: #fff;
  margin: 0 auto;
  position: relative;
  top: 25px;
}
</style>

<style>
.el-tabs__header {
  margin: 0px;
}
.el-tabs__nav {
  float: none;
  display: flex;
  justify-content: center;
  height: 72px;
}
.el-tabs__active-bar {
  left: 235px;
}
.el-tabs__item {
  line-height: 72px;
  font-size: 30px;
}
</style>
